import React from 'react';
import { message, Typography } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import styles from './index.less';
import { useHistory } from 'react-router-dom';
import { OSS_URL } from '@/index';
import { useRequest } from '@/hooks';

export default () => {
    const history = useHistory();
    return (
        <div className={styles.layout}>
            <div style={{margin: 'auto'}}>
                <ProForm
                    validateMessages={{required: '必填项'}}
                    onFinish={async (event) => {
                        const {data} = await useRequest({
                            url: '/subject/query',
                            data: event,
                            method: 'POST'
                        })
                        if (data !== null) {
                            await new Promise<void>((resolve)=>{
                                sessionStorage.setItem('tn', window.btoa(encodeURI(JSON.stringify(event))));
                                sessionStorage.setItem('subject', JSON.stringify(data))
                                message.success({
                                    content: '登录成功，正在跳转',
                                    duration: 0.8
                                });
                                resolve()
                            })
                            history.push('/home');
                        } else {
                            message.warn({
                                content: '用户名或密码不正确',
                                key: 1000
                            });
                        }

                    }}
                    submitter={{
                        searchConfig: {
                            submitText: '登录'
                        },
                        render: (_, dom) => dom.pop(),
                        submitButtonProps: {
                            size: 'large',
                            style: {
                                width: '100%'
                            }
                        }
                    }}
                >
                    <div className={styles.title}>
                        <img src={`${OSS_URL}/image/logo.png`} alt='' />
                        <h1>微信小程序患者信息管理系统</h1>
                    </div>
                    <Typography className={styles.note}>
                        <Typography.Text>
                            <span style={{color: '#a0a0a0', fontSize: '16px'}}>本系统可供管理员登录使用</span>
                        </Typography.Text>
                    </Typography>
                    <ProFormText
                        fieldProps={{
                            size: 'large',
                            prefix: <UserOutlined />
                        }}
                        name='username'
                        placeholder='请输入用户名'
                        rules={[
                            {
                                required: true
                            }
                        ]}
                    />
                    <ProFormText.Password
                        fieldProps={{
                            size: 'large',
                            prefix: <LockOutlined />
                        }}
                        name='password'
                        rules={[
                            {
                                required: true
                            }
                        ]}
                        placeholder='请输入密码'
                    />
                </ProForm>
            </div>
            <div className={styles.copyright}>
                &copy;2021 &nbsp;上海和卓医学检验实验室有限公司
            </div>
        </div>
    )
        ;
};
